<template>
  <div class="container">
    <div>
      <div class="title1">某沙岛礁卫生防疫保障关键技术研究</div>

      <el-button class="add" type="text">
        <i class="el-icon-circle-plus"></i>新增节点</el-button
      >
    </div>
    <div class="process">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :placement="activity.placement"
        >
          <div :style="{'marginTop': '-7px', 'color': '#aaa'}">
            <span :style="{'marginRight': '20px'}">{{activity.timestamp}}</span>
            <span>操作人: datou</span>
          </div>
          <div class="process-content">
            {{ activity.content }}
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProcessManage",
  data() {
    return {
      activities: [
        {
          content: "更新实验数据",
          timestamp: "2018-04-03 20:46",
          color: "#157dff",
          placement: "top",
        },
        {
          content: "导出数据分析",
          timestamp: "2018-04-03 20:46",
          color: "#157dff",
          placement: "top",
        },
        {
          content: "新增项目人员，分配角色权限",
          timestamp: "2018-04-03 20:46",
          color: "#157dff",
          placement: "top",
        },
        {
          content: "更新实验数据",
          timestamp: "2018-04-03 20:46",
          color: "#157dff",
          placement: "top",
        },
        {
          content: "新建项目",
          timestamp: "2018-04-03 20:46",
          color: "#157dff",
          placement: "top",
        },
      ],
    };
  },
};
</script>

<style scoped>
.title1 {
  font-size: 36px;
  color: #157dff;
}
.add {
  margin-top: -35px;
  font-size: 20px;
  color: #157dff;
  float: right;
}
.process {
  display: flex;
  margin: 50px;
  font-size: 20px;
  justify-content: center;
}

.process >>> .el-timeline-item__tail {
  border-left-width: 10px;
  left: 0px;
}

.process >>> .el-timeline-item__node {
  width: 20px;
  height: 20px;
  left: -5px;
}

.process .el-timeline-item {
  padding-bottom: 40px;
}

.process-content {
  font-size: 20px;
}

.el-timeline,
.el-transfer__button i,
.el-transfer__button span {
  font-size: 8px;
}
</style>